<!--
 * @Author: lucky
 * @Date: 2021-06-29 16:47:56
 * @LastEditors: wfz
 * @LastEditTime: 2021-07-03 19:26:13
 * @Description: 
-->
<template>
  <div class="body">
    <!-- {{ custome }} -->
    <div class="heard">收益</div>
    <div class="tagp">
      <van-tabs @click="toSwitch">
        <van-tab title="全部收益">
          <div class="whole" v-for="item in custome" :key="item.id">
            <div class="face">
              <van-image
                style="margin-top: 5px"
                width="80"
                height="80"
                :src="item.customer.userFace"
              />
            </div>
            <div class="msg">
              <div class="up">
                <!-- {{ item.customer.username }} -->
                <span class="us">{{ item.customer.username }}</span>
                <span class="zt">{{ item.status }}</span>
              </div>
              <!-- <div class="cen">
              </div> -->
              <p style="font-size: 12px; margin: 10px 0 0 6px; color: #666">
                {{
                  item.address.province +
                  item.address.city +
                  item.address.area +
                  item.address.address
                }}
              </p>
              <div class="dow">
                <!--  -->
                <span class="tm">{{
                  moment(item.orderTime).format("YYYY-MM-DD A HH:mm")
                }}</span>
                <span class="qian">￥{{ item.total }}</span>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="提现情况">
          <div class="neir">
            <div class="mon" v-for="item in account" :key="item.id">
              <div class="hea" style="color: #5a5a5a">
                申请
                <span
                  class="txType"
                  v-if="item.applyType === '提现'"
                  style="color: #6699cc"
                >
                  {{ item.applyType }}
                </span>
                <span
                  class="txType"
                  v-else-if="item.applyType === '充值'"
                  style="color: #33cc33"
                >
                  {{ item.applyType }}
                </span>
                <span class="jiaqian"> <span>+￥</span>{{ item.money }} </span>
                —到银行卡
              </div>
              <div class="fo">
                <div class="txTime">
                  {{ moment(item.applyTime).format("YYYY-MM-DD A HH:mm") }}
                </div>
                <div
                  class="txZt"
                  v-if="item.status === '通过'"
                  style="color: #33cc33"
                >
                  {{ item.status }}
                </div>
                <div
                  class="txZt"
                  v-else-if="item.status === '不通过'"
                  style="color: #f76c6c"
                >
                  {{ item.status }}
                </div>
                <div
                  class="txZt"
                  v-else-if="item.status === '未审核'"
                  style="color: #ff976a"
                >
                  {{ item.status }}
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- {{ item }} -->
  </div>
</template>

<script>
import { Toast } from "vant";
import { pageQuery, pageQueryAccountApply } from "@/api/money";
import moment from "moment";
import { getinfo } from "@/utils/auth";
moment.locale("zh-cn");

export default {
  data() {
    return {
      moment,
      custome: {},
      params: {
        page: 1,
        pageSize: 1000,
        employeeId: getinfo(),
        status: "已完成",
      },
      account: {},
      paramss: {
        page: 1,
        pageSize: 1000,
      },
    };
  },
  computed: {},
  methods: {
    toSwitch(name, title) {
      Toast(title);
    },
    async queryData() {
      let res = await pageQuery(this.params);
      // console.log(res);
      this.custome = res.data.list;
      // console.log(this.custome);
      // console.log(this.custome.data);
      // console.log(res);
    },
    async queryAccount() {
      let res = await pageQueryAccountApply(this.paramss);
      // console.log(res);
      this.account = res.data.list;
      console.log(this.account);
    },
  },
  created() {
    this.queryData();
    this.queryAccount();
  },
  mounted() {},
};
</script>
<style scoped>
.body {
  width: 100%;
  /* height: 617px; */
  overflow: scroll;
  /* margin-bottom: 10px; */
}
/* ************************************头部页面****************************** */
.heard {
  width: 100%;
  height: 58px;
  text-align: center;
  line-height: 58px;
  background-color: #6699ff;
  font-size: 20px;
  /* font-weight: 1000; */
  font-family: "华文琥珀";
  position: fixed;
  /* margin-top: -58px; */
  z-index: 99;
}
/* ************************************************全部收益+提现状况——全部收益******************************* */
.tagp {
  /* background-color: aquamarine; */
  /* position: fixed; */
  height: 600px;
  margin-top: 50px;
  /* height: 58px; */
  /* border-bottom: 1px solid black; */
}
.whole {
  width: 82%;
  height: 120px;
  margin: 5% 9%;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
}
.face {
  width: 80px;
  height: 80px;
  /* border-radius: 15px; */
  /* text-align: center; */
  /* background-color: aquamarine; */
  margin: 10px;
  margin-top: 13px;
}
.msg {
  width: 69%;
  height: 110px;
  /* background-color: aquamarine; */
  margin: 5px 0 0 -7px;
}
.up,
.dow {
  width: 98%;
  height: 30px;
  /* background-color: bisque; */
  margin: 2px;
}
.us,
.zt {
  display: inline-block;
  width: 100px;
  height: 100%;
  /* background-color: blueviolet; */
  margin: -5px 0px 2px 4px;
  line-height: 35px;
}
.zt {
  text-align: right;
  font-size: 11px;
  /* color: #f8825d; */
  /* line-height: 25px; */
  color: #33cc33;
}
.cen {
  font-size: 12px;
  line-height: 35px;
  margin-left: 7px;
  color: #666;
}
.tm,
.qian {
  display: inline-block;
  width: 50px;
  height: 100%;
  /* background-color: blueviolet; */
  margin: -3px 2px 0px 2px;
  line-height: 45px;
  font-size: 12px;
}
.tm {
  width: 150px;
}
.qian {
  text-align: right;
}
/* ************************************************全部收益+提现状况——提现状况******************************* */
.neir {
  /* background-color: blue; */
  height: 525px;
  overflow: auto;
  /* padding-bottom: 20px; */
  /* margin-bottom: 5px; */
}
.mon {
  width: 80%;
  height: 68px;
  margin: 0 auto;
  margin-top: 0px;
  margin-top: 1em;
  border-radius: 5px;
  padding: 0.5em 1em;
  color: #999;
  box-shadow: 0 0 10px #ccc;
  margin-bottom: 23px;
  /* background-color: aquamarine; */
}
.jiaqian {
  float: right;
  color: #ffc40f;
  font-size: 17px;
}
.fo {
  margin-top: 20px;
}
.txTime {
  float: left;
  font-size: 12px;
  /* color: #999; */
  color: #666666;
  line-height: 30px;
}
.txZt {
  float: right;
  font-size: 12px;
}
</style>
